<template>
	<view class="home">
		<view class="fix">
			<top-status></top-status>
			<view class="tabs wap">
				<!-- <view class="city" @click="toSelectCity">
					<uni-icons type="location-filled" size="16" color="#000"></uni-icons>
					<view class="link-1">
						<text class="linkcity">{{city || "全国"}}</text>
					</view>
					<uni-icons type="bottom" size="16" color="#333333"></uni-icons>
				</view> -->

				<image class="img2">
					<!-- <view class="zuju">组局</view> -->
					<view class="tab1" :class="{'tab4':tabInd == 0}" @click="tabInd =0">组局</view>
					<!-- <view class="tab2" :class="{'tab4':tabInd == 1}" @click="tabInd =1">我的</view> -->
			</view>
			<scroll-view style="white-space: nowrap;width: 80%;" :scroll-x="true"  :show-scrollbar="true" scroll-left="0" @scroll="whetherend">
			<view class="nav_">
				<view :class="['nav_item',navIndex==index ? 'nav_active':'nav_text']" v-for="(item, index) in nav" :key="item.ID"
					@click="sel_tab(index)">
					{{ item.Name }}
				</view>
			</view>
			</scroll-view>
			<view v-if="navIndex==0"  class="puadd" @click="publish(navIndex)">
					<image class="releaseimg" :src="ossPath+'/upload/17117649896281040.png'"></image>
					<view class="retext">发布</view>
			</view>
			<view v-if="navIndex==1"  class="puadd" @click="sendFun('教练发布')">
					<image class="releaseimg" :src="ossPath+'/upload/17117649896281040.png'"></image>
					<view class="retext">发布</view>
			</view>
			<view v-if="navIndex==2"  class="puadd" @click="sendFun('赛事发布')">
					<image class="releaseimg" :src="ossPath+'/upload/17117649896281040.png'"></image>
					<view class="retext">发布</view>
			</view>
			<!-- <image v-if="isend" class="endimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png"></image> -->
		</view>
		<view class="card" v-if="navIndex==1">
			<view class="load" v-if="!load">
				<text style="margin:0 auto">正在加载</text>
				<!-- <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon> -->
			</view>
			<block v-else>
				<x-scroll :fixed="true" :isNav="true" @onRefresh="onRefresh(navIndex)" @scrolltolower="scrolltolower(navIndex)" :refresh="true" :heightFix="-90" :autoHeight="true">
					<view class="tit_" style="padding: 10rpx 36rpx 0;"> 
						<view class="tit_teacher">
							教练
						</view>
						<view class="lit"  @click="nav_to('/pages/teacher/teacherList')">
							更多
							<uni-icons type="right" size="18" color="#333333"></uni-icons>
						</view>
					</view>
					<scroll-view class="scroll_wrap">
						<!-- <view class="scroll_item" >
							<view v-if="Array.isArray(teacher_list) && teacher_list.length" style="display: flex;">
								<view class="nav_card" v-for="item in teacher_list" :key="item.ID">
									<image :src="item.PhotoUrl"	mode="aspectFill"  @click.stop="toUser(item)"></image>
									<view class="navcard_info">
										<view class="name">
											{{item.TrueName}}
										</view>
									</view>
								</view>
							</view>
							<view class="null" v-else style="height: 10vh;">
								暂无教练
							</view>
						</view> -->
					</scroll-view>

					<view  style="padding: 0rpx 36rpx;">
						<view class="tit_">
							教练课程
						</view>
						<block v-if="Array.isArray(classes_list) && classes_list.length">
							<view class="teacherbox"  v-for="item in classes_list" :key="item.ID" @click="nav_to(`/pages/teacher/detail?id=${item.ID}`)">
								<image class="teacherimg" :src="item.HeadImgUrl"  mode="aspectFill"></image>
								<view class="contbox">
									<view class="title">{{item.Title}}</view>
									<view class="technicianName">教练：{{item.TechnicianName}}</view>
									<view class="tetimebox">
										<image class="tetimeimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png"></image>
										<text class="tetime">
											{{getTime2(item.ServerDate) +" " +getWeek(item.ServerDate) + item.ServerTime }} 
										</text>
									</view>
									<view class="teaddrebox">
										<image class="teaddreimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png"></image>
										<text class="teplace">{{item.Place}}</text>
										<text class="tedis">{{item.Distance>100?'>100km':item.Distance}}</text>
									</view>
									<view class="poplebox">
										<view class="polist" v-if="item.Item.length>0">
											<image class="poimg" v-for="(value,index) in item.Item.slice(0,3)" :key="index" :src="value.HeadImgUrl"></image>
										</view>
										<view class="memberbox">
											<text class="member">{{item.Item.length}}</text>
											<text class="sum">/{{item.PeopleNum}}</text>
										</view>
										
										<text class="baom">已报名</text>
										<view class="tiy">去体验</view>
									</view>
								</view>
							</view>
						</block>
						
						<view class="null" v-else>
							暂无教练课程，请耐心等待哦~~~
						</view>
					</view>
				</x-scroll>
			</block>
			
		</view>
		<view class="card"  style="padding: 10rpx 36rpx 20rpx;" v-if="navIndex==2">
			<view class="load" v-if="!load">
				<text style="margin:0 auto">正在加载</text>
				<!-- <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon> -->
			</view>
			<block v-else>
				<x-scroll :fixed="true" isNav @onRefresh="onRefresh(navIndex)" @scrolltolower="scrolltolower(navIndex)" :refresh="true" :heightFix="-90" :autoHeight="true">
					<block v-if="Array.isArray(party_list) && party_list.length">
						<view class="card_item" v-for="(l,i) in party_list" :key="i"  @click="nav_to(`/pages/match/detail?id=${l.ID}`)">
							<view class="conbox">
								<image class="bannerimg" :src="l.Banner"  mode="aspectFill"></image>
								<view class="textbox">
									<view class="destext">{{l.Title}}</view>
									<view class="destimebox">
										<image class="destimeimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png"></image>
										<text class="destetime">
												{{ formatDate(l.StartDate,1) }}~{{ formatDate(l.EndDate,2) }} 
										</text>
									</view>
									<view class="desadderbox">
										<image class="desaddimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png"></image>
										<text class="desadd">{{l.Address}}</text>
									</view>
									
								</view>
								<view class="comimgbox">
									<view class="communbox"  v-if="l.Communities.length>0">
										<view v-for="(item,index) in l.Communities.slice(0,3)" :key="index">
										<image class="comimg" :src="item.HeadImgUrl"></image>
										</view>
									</view>
									<view class="peplength">{{l.Communities.length}}</view>
									<view class="limit">/无限</view>
									<view class="com">已报名</view>
									<view class="gotocom">去报名</view>
								</view>
								
							</view>
						</view>		
					</block>
					<view class="null" v-else>
						暂无赛事，请耐心等待哦~~~
					</view>
				</x-scroll>
			</block>
		</view>
		<view class="card" v-if="navIndex == 0">

			<view class="load" v-if="!load">
				<text style="margin:0 auto">正在加载</text>
				<!-- <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon> -->
			</view>
			<block v-else>
				<x-scroll :fixed="true" isNav @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true">
					<view v-if="Array.isArray(list) && list.length > 0">
						<view class="contentbox" :style="'background-image: url('+item.Images+');background-repeat: no-repeat;background-size: cover;background-position: center;'" v-for="(item,index) in list" :key="index" @click="nav_to(`/pages/ball/ball_details?id=${item.ID}`)">
						<view class="mask">
							<view class="Typebox" :class="{'bg1':item.PlaceType == '约教练','bg2':item.PlaceType == '约拼车','bg3':item.PlaceType == '约陪滑','bg4':item.PlaceType == '约组局',}">
								{{item.PlaceType?item.PlaceType:''}}
							</view>
							<view class="titlebox">
								<text class="title">
									{{item.Title?$util.entitiesToUtf16(item.Title):''}}
								</text>
								<text v-if="(item.Status==0)" class="status">
                                	预约中
								</text>
								<text v-if="(item.Status==1)" class="status">
									进行中
								</text>
								<text v-if="(item.Status==2)" class="complete">
									已发奖励
								</text>
								<text v-if="(item.Status==3)" class="complete">
									已结束
								</text>
							</view>
							<block v-if="item.PlaceType == '约陪滑'">
								<view class="timebox">
									<image class="timeimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171505381510039.png"></image>
									<text class="time">{{'打赏:'+item.Commission+'元' }}</text>
								</view>
							</block>
							<block v-if="item.PlaceType == '约组局'">
								<view class="timebox">
									<image class="timeimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715054318678778.png"></image>
									<text class="time">{{item.PeopleNum }}</text>
								</view>
								<view class="paymentbox">
									<image class="paymentimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715054336116729.png"></image>
									<text class="FeeRule">{{item.FeeRule?item.FeeRule:'--'}}</text>
								</view>
							</block>
							<block v-if="item.PlaceType == '约教练'">
								<view class="paymentbox">
									<image class="paymentimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715054336116729.png"></image>
									<text class="FeeRule">{{item.Commission?item.Commission+'元/小时':'--'}}</text>
								</view>
							</block>
							<block v-if="item.PlaceType == '约拼车'">
								<view class="paymentbox">
									<image class="paymentimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715054336116729.png"></image>
									<text class="FeeRule">{{item.FeeRule?item.FeeRule:'--'}}</text>
								</view>
								<view class="addressbox">
									<image class="addressimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17150538647601021.png"></image>
									<text class="address">{{item.Start_Pot?item.Start_Pot:'--'}}</text>
									<image class="jiantou" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17150599984921169.png" mode=""></image>
									<text class="endpot">{{item.End_Pot?item.End_Pot:'--'}}</text>
								</view>
							</block>
							<view class="timebox">
								<image class="timeimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171505384823750.png"></image>
								<text class="time">{{getTime2(item.ServerDate) +" " +getWeek(item.ServerDate) + item.ServerTime }}</text>
							</view>
							<view class="addressbox" v-if="item.PlaceType != '约拼车'">
								<image class="addressimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17150538647601021.png"></image>
								<text class="address">{{item.Place?item.Place:''}}</text>
								<text class="distance">距您{{item.Distance?item.Distance:''}}km</text>
							</view>
							<view class="userbox">
								<image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
								<view>
									<view class="name">{{item.Name?$util.entitiesToUtf16(item.Name):''}}</view>
									<view>
										<text class="Birthday">{{item.Item[0]?getYearStr(item.Item[0].Birthday)+'后':'--' }}</text>
										<text class="city">{{item.Item[0].UserCity?item.Item[0].UserCity:'--'}}</text>
									</view>
								</view>
								
								<!-- <view class="endroll" v-if="(item.Status==3)">已结束</view> -->
								<view  v-if="(item.Status==0)" @click.stop="subJoin(item.ID,item.UserID)" class="enroll">
									去约Ta
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711003960492543.png" mode="widthFix"></image>
									</view>
							</view>
							</view>
						</view>
						<view class="blank_space_view"></view>
					</view>
					<block v-else>
						<view class="vipInfo">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" mode="widthFix"></image>
						<text>努力加载会员信息</text>
					</view>
					</block>
				</x-scroll>
			</block>
		</view>
	</view>
</template>

<script>
	import xScroll from "@/components/x-scroll/x-scroll.vue"
	import topStatus from "@/components/topStatus/topStatus.vue";
	export default {
		components: {
			topStatus,
			xScroll
		},
		data() {
			return {
				isend:true,
				tabInd: 0, //tabId(0:发现,1:我的)
				btn_curr: '', //暂时没有用
				user: {}, //个人信息
				load: false, //是否加载
				_freshing: true, //是否开启下拉刷新功能
				selectorVisible: false, //暂时没有用
				city: "", //当前城市
				siftList: [], //日期
				PageIndex: 1, //页码
				PageSize: 10, //请求条数
				list: [], //(发现/我的)列表数组
				oldList: [], //旧数组(暂时不知道干吗)
				isMore: true, //是否加载更多
				latitude: null, //纬度
				CompanyID: 6002, //公司Id
				SortField: "", //排序字段
				SortType: "", //排序类型
				ServerDate: null, //日期查询

				nav: [{ID: 5,Name: "找运动者"}],
				navIndex: 0,
				navType: '',
				
				//赛事
				party_list:[],
				isParty:true,
				//教练
				teacher_list:[],
				
				//教练课
				classes_list:[],
				isClass:true,

				ossPath:'',
			};
		},
		watch: {
			// 暂时无用
			'btn_curr': function(newVal) {

				if (newVal === 'city') {
					this.SortField = "Distance";
					this.SortType = "ASC";
					this.list = [];
					this.oldList = [];
					this.getList();
				}

				if (newVal === 'time') {
					this.SortField = "Date";
					this.SortType = "ASC";
					this.list = [];
					this.oldList = [];
					this.getList();
				}

				if (newVal === 'now') {
					this.SortField = "NoAuditPeopleNum";
					this.SortType = "ASC";
					this.list = [];
					this.oldList = [];
					this.getList();
				}
			},
			//  tab标签发生变化
			tabInd(newVal) {

				this.init();
			}
		},
		async onShow() {
			this.user = uni.getStorageSync('user');
			let that = this
			uni.$on('getSelectCity', function(data) {
				if (data.name) {
					that.city = data.name || that.city
				}
			})

			await this.getCity();

			this.oldList = [];

			let published =  uni.getStorageSync('published');
			if(published){
				await this.init();
				uni.setStorageSync('published',false)
			}
			
		},
		async onLoad() {
			await this.getPageInfo()
			this.ossPath = this.$ossPath
			await this.getCity();
			await this.init();
			if (await this.$store.getters.getLoginState) {
				// this.oldList = [];
				// await this.init();
			}
			uni.$on('send',()=>{
				if(this.navIndex==3 || this.navIndex==4){
					this.sel_tab(this.navIndex)
				}
			})

		},
		onUnload(){
			uni.$off('send')
		},
		methods: {
			// 获取页面配置信息
			async getPageInfo(){
				let res = await this.$api.post('Module/List', {
					Type:2
				});
				const {code,data,message} = res
				if (code == 0) {
					this.nav = data || this.nav
				}
				
			},
			whetherend(e){
				if(e.detail.scrollLeft > 50){
					this.isend = false
				}else{
					this.isend = true
				}
			},
			//去报名
			async subJoin(id,UserID) {

				let u = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});

				this.user = u.data;
				if(this.user.UserID == UserID){
					this.$pv.msg('不能参与自己创建的');
					return
				}
				if (this.user.IsAuth == 0) {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '未注册用户不能预约，请先注册账号',
						confirmText: "关闭",
						cancelText: "注册账号",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								_this.nav_to('/pages/start/start2');
							}
						}
					});
				}

				if (this.user.IsAuth == 0)
					this.nav_to(`/pages/user/start2`);
				else
					this.nav_to(`/pages/ball/ball_join_confirm?id=${id}`);


			},
			sel_tab(index) {
				this.navIndex = index;
				console.log('tabtabtab');
				if (this.navIndex == 0) {
					this.navType = '下场';
					this.PageIndex = 1;
					this.getList();
				} else if (this.navIndex == 3) {
					this.navType = '练习场';
					this.PageIndex = 1;
					this.getList();

				} else if (this.navIndex == 4) {
					this.navType = '模拟器';
					this.PageIndex = 1;
					this.getList();
				} else if (this.navIndex == 1) {
					this.PageIndex = 1;
					this.get_teacherlist();
					this.get_classlist();

				} else if (this.navIndex == 2) {
					this.PageIndex = 1;
					this.get_partylist();
				}

				// this.load = true;
			},
			async get_classlist() {
				let res = await this.$api.post('/Technicians/ClassList',{PageIndex:this.PageIndex,PageSize:this.PageSize});
				if(this.PageIndex==1) this.classes_list = res.data
				else this.classes_list = this.classes_list.concat(this.classes_list)
				this.isClass = Array.isArray(res.data) && res.data.length >= this.PageSize;
				if(!this.classes_list) return
				this.classes_list.forEach(item=>{
					if(!item.Images) return
					item.Images = JSON.parse(item.Images)
				})
			},
			async get_partylist() {
				let res = await this.$api.post('/Action/List',{
					ActType:'赛事',
					PageIndex:this.PageIndex,
					PageSize:this.PageSize
				});
				if(this.PageIndex==1) this.party_list = res.data
				else this.party_list = this.party_list.concat(this.party_list)
				this.isParty = Array.isArray(res.data) && res.data.length >= this.PageSize;
				// this.party_list.forEach(item=>{
				// 	if(!item.Banner) return;
				// 	item.Banner = JSON.parse(item.Banner)
				// })
			},
			async get_teacherlist() {
				let res = await this.$api.post('/Technicians/Recommend');
				
				this.teacher_list = res.data
			},
			truncateString(str) {
			  if (str.length > 10) {
			    return str.substring(0, 10).concat('...');
			  } else {
			    return str;
			  }
			},
			onShareAppMessage(res) { //发送给朋友
				let pid = uni.getStorageSync('user').UserID;
				let Name =this.$util.entitiesToUtf16(uni.getStorageSync('user').Name) ;
				return {
					title: `${Name}向您推荐了动魅运动，赶快来报名吧`,
					path: `/pages/tab/home?pid=${pid}`,

				}
			},
			setServerDate(e) {

				if (e) {
					this.ServerDate = e.date;
					this.list = [];
					this.oldList = [];
					this.init();
				} else {
					this.ServerDate = null;
					this.list = [];
					this.oldList = [];
					this.init();
				}
			},

			toSelectCity() {
				const hotCitys = '';
				uni.navigateTo({
					url: '/pages/city/cityList'
				})
			},
			// 获取定位
			getLocationSysc() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {

							const defaultLocation = {
								latitude: 0,
								longitude: 0
							};
							resolve(defaultLocation);
						}
					});
				})

			},
			// 获取当前地址并解析
			async getCity() {
				let loc = await this.getLocationSysc();

				let longitude = loc.longitude;
				this.longitude = loc.longitude;
				let latitude = loc.latitude;
				this.latitude = loc.latitude;
				let o = {
					longitude,
					latitude
				};
			},
			// 获取页面相关数据
			async init() {
				// 获取本地用户资料
				this.user = uni.getStorageSync('user');
				//  获取列表数据
				await this.getList();
				// 暂时不知
				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'home',
					Platform: uni.getStorageSync('platform')
				});
				// 取消加载中
				// this.load = true;
			},
			publish(index) {
				if (this.user.IsAuth == 0)
					this.nav_to('/pages/start/start2');
				else
					this.nav_to('/pages/ball/ball_add?golfType='+index);
			},
			sendFun(type){
				if(this.user.IsAuth==0) this.nav_to('/pages/start/start2') 
				else{
					if(type=='教练发布') this.nav_to('/pages/teacher/send')
					if(type=='赛事发布') this.nav_to('/pages/match/send')
					if(type=='认证教练') this.nav_to(`/pages/teacher/Settled`)
				}
			},
			async toUser(item){
				this.ran_to_add_ball(`/pages/user/user_visitor?id=${item.UserID}`);
			},
			async toSpheroid(item) {
			
				let res = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});
			
				let con = res.data;
			
				if (con.IsAuth == 0) {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '非注册用户请注册账号',
						confirmText: "关闭",
						cancelText: "注册账号",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								_this.nav_to('/pages/start/start2');
							}
						}
					});
					return;
				}
			
				// if (con.UserType == "普通用户") {
				// 	this.$refs.member_upgrade.open();
				// 	return;
				// }
			
				if (this.ID === con.UserID) {
					this.$pv.msg('不能和自己约');
					return;
				}
				this.ran_to_add_ball(`/pages/ball/spheroid?inviteId=${item.UserID}`);
			},
			//  获取发现列表数据
			async getList() {
				// 当前tabID为发现请求数据
				if (this.tabInd == 0) {
					const PageKey = this.nav[this.navIndex].Name || ''
					// 参数对象
					let o = {
						PageIndex: this.PageIndex,
						PageSize: this.PageSize,
						// GolfType: this.navType,
						City: this.city,
						PageKey,
						User_Lng: this.longitude,
						User_Lat: this.latitude,
						ServerDate: this.ServerDate,
						SortField: this.SortField,
						SortType: this.SortType
					}
					//  当前日期为空清除ServerDate属性
					if (o.ServerDate == null) {
						delete o.ServerDate;
					}
					// 请求接口
					let res = await this.$api.post('Appointment/PageList', o);

					//发现数组赋值
					if (this.PageIndex == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}

					// 添加userIDList
					this.list.forEach(i => {
						i.userIDList = i.Item.map(a => a.UserID);
						i.PeopleCount = i.Item.filter(v => v.Status>=1)
					});
					// 是否加载数据
					this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
					// 返回true
					this.load = true;
					return true;
				} else {
					// 当前tab为我的
					let o = {
						PageIndex: this.PageIndex,
						PageSize: this.PageSize,
						CompanyID: this.CompanyID,
						City: this.city,
						User_Lng: this.longitude,
						User_Lat: this.latitude,
						ServerDate: this.ServerDate,
						SortField: this.SortField,
						SortType: this.SortType,
						UserID: this.user.UserID
					}
					if (o.ServerDate == null) {
						delete o.ServerDate;

					}

					let res = await this.$api.post('Appointment/PageList', o);

					// let list = res.data
					if (this.PageIndex == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}

					this.list.forEach(i => {
						i.userIDList = i.Item.map(a => a.UserID);
					});
					this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;

					this.load = true;
					return true;
				}
			},
			// 我的列表数据相关处理(暂时不管)
			clearRepetition(arr, key = "id") {
				let newArr = [];
				arr.forEach(item => {
					let index;
					let check = newArr.every((newItem, i) => {
						if (item[key] !== newItem[key]) {
							index = -1;
							return true;
						} else {
							index = i;

							return false;
						}
					})
					if (check) {
						newArr.push(item);
					} else {
						newArr.splice(index, 1, item);
					}

				})

				return newArr;
			},
			//下拉刷新
			async onRefresh(index) {
				this.PageIndex = 1;
				if(index==3){
					await this.get_classlist()
				}else if(index==4){
					await this.get_partylist()
				}else{
					this.oldList = [];
					await this.getList()					
				}
			},
			//滚动到底部触发
			async scrolltolower(index) {
				if(index==3){
					if(this.isClass){
						this.PageIndex++;
						this.get_classlist()
					}
				}else if(index==4){
					if(this.isParty){
						this.PageIndex++;
						this.get_partylist()
					}
				}else{
					if (this.isMore) {
						this.PageIndex++;
						this.getList();
					}					
				}
				
			},
		},
		onUnload() {
			uni.$off('getSelectCity')
		},
		computed: {
			formatDate() {
				return (date1,type) => {
					const date = new Date(date1);
					const month = date.getMonth() + 1;
					const day = date.getDate();
					const hours = date.getHours();
					const minutes = date.getMinutes();
					return type == 1?`${month}/${day} ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`:`${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
				};
			},
			getTime2() {
				return l => {
					let d = new Date(l);
					let timestamp = d.getTime();

					return this.$u.date(timestamp, 'mm-dd');
				}
			},
		
			getWeek() {
				return l => {
					let d = new Date(l);
					let week = d.getDay();
					let weelStr = week == 0 ? '星期天' : week == 1 ? '星期一' : week == 2 ? '星期二' : week == 3 ? '星期三' :
						week == 4 ?
						'星期四' : week == 5 ? '星期五' : '星期六';
					return weelStr;
				}
			}
		},
	}
</script>

<style lang="scss">

.blank_space_view{
	// width: 100rpx;
	height: 200rpx;
}
page{
	background-color: #F6F6F6;
}
	.home {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}
	.null{
		width: 100%;
		height: 20vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nav_ {
		display: flex;
		align-items: center;
		z-index: 999;
		position: sticky;
		top: 0;
		background: #fff;
		position: relative;
	}

	.nav_item {
		padding: 24rpx 25rpx;
	}
	.nav_text{
		color: #999999;
	}
	.nav_active {
		color: #333333;
		font-weight: bold;
		position: relative;

		&:after {
			content: '';
			width: 30%;
			height: 8rpx;
			border-radius: 16rpx;
			background-color: #333333;
			position: absolute;
			left: 50%;
			bottom: 4rpx;
			transform: translate(-50%, -50%);
		}
	}

	
	.contentbox{
		width: 702rpx;
		height: 1124rpx;
		margin: 24rpx 24rpx 30rpx 24rpx;
		// background-color: #fff;
		border-radius: 24rpx;
		// padding-bottom: 20rpx;
		overflow: hidden;
		position: relative;
		.mask{
			width: 100%;
			height: 100%;
			padding-top: 706rpx;
			box-sizing: border-box;
			position: relative;
			background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
		}
		.Typebox{
			width: 148rpx;
			height: 56rpx;
			line-height: 56rpx;
			color: #fff;
			border-radius: 24rpx 0rpx 24rpx 0rpx;
			text-align: center;
			font-weight: 600;
			font-size: 28rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.bg1{
			background-color: #0D0D0D;
		}
		.bg2{
			background-color: #17AD80;
		}
		.bg3{
			background-color: #1BB3D3;
		}
		.bg4{
			background-color: #B13EE3;
		}
		.titlebox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;
			// margin: 24rpx;

			.title{
				width: 560rpx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				font-size: 42rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin-left: 24rpx;
			}
			.complete{
				width: 104rpx;
				height: 44rpx;
				background-color: #F4F4F4;
				font-size: 24rpx;
				color: #999999;
				text-align: center;
				line-height: 44rpx;
				margin-right: 32rpx;
			}
			.status{
				width: 104rpx;
				height: 44rpx;
				background-color: #E3FFE5;
				font-size: 24rpx;
				color: #39B240;
				text-align: center;
				line-height: 44rpx;
				margin-right: 32rpx;
			}
		}
		.timebox{
			display: flex;
			margin: 0 24rpx;
			margin-bottom: 8rpx;
			.timeimg{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
				margin-top: 4rpx;
			}
			.time{
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.addressbox{
			display: flex;
			margin: 0 24rpx;
			margin-bottom: 8rpx;
			
			.addressimg{
				height: 32rpx;
				width: 32rpx;
				margin-right: 10rpx;
				margin-top: 4rpx;
			}
			.jiantou{
				width: 24rpx;
				height: 24rpx;
				margin-top: 6rpx;
				margin-left: 10rpx;
			}
			.address{
				max-width: 300rpx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.distance{
				font-size: 28rpx;
				color: #FFFFFF;
				border-left: 1rpx solid #FFFFFF;
				margin-left: 10rpx;
				padding: 0 10rpx;
			}
			.endpot{
				font-size: 28rpx;
				color: #FFFFFF;
				margin-left: 10rpx;
				// padding: 0 10rpx;
			}
		}
		.paymentbox{
			display: flex;
			margin: 0 24rpx;
			margin-bottom: 8rpx;
			.paymentimg{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
			.FeeRule{
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
		.userbox{
			display: flex;
			// margin: 0 24rpx;
			margin-bottom: 8rpx;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: rgba(0,0,0,0.6);
			width: 100%;
			height: 144rpx;
			.userimg{
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				margin-left: 32rpx;
			}
			.name{
				color: #FFFFFF;
				font-size: 28rpx;
			}
			.Birthday{
				font-size: 24rpx;
				color: rgba(255,255,255,0.8);
				border-right: 1rpx solid rgba(255,255,255,0.8);
				padding-right: 10rpx;
			}
			.city{
				font-size: 24rpx;
				color: rgba(255,255,255,0.8);
				margin-left: 10rpx;
			}
			.enroll{
				width: 146rpx;
				height: 56rpx;
				text-align: center;
				line-height:56rpx;
				border-radius: 28rpx;
				background-color: #FFFFFF;
				color: #333333;
				font-size: 24rpx;
				position: absolute;
				right: 32rpx;
				bottom: 44rpx;
				image{
					width: 20rpx;
					height: 24rpx;
					vertical-align: middle;
    				margin-bottom: 4rpx;
				}
			}
			.endroll{
				width: 120rpx;
				height: 56rpx;
				text-align: center;
				line-height:56rpx;
				border-radius: 28rpx;
				background-color: #BDBDBD;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				bottom: -6rpx;
			}
		}
	}
	.card {
		.tit_{
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
			.tit_teacher{
				color: #333333;
				font-size: 32rpx;
				font-weight: 600;
			}
			.lit{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #333333;
			}
		}
		.scroll_wrap {
			white-space: nowrap;
			margin-bottom: 30rpx;

			.scroll_item {
				display: flex;
				position: relative;
				margin: 0 28rpx;
			}

			.nav_card {
				border-radius: 16rpx;
				margin-right: 30rpx;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
				
				.navcard_info {
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.name {
						color: #333333;
						text-align: center;
						font-size: 28rpx;
						margin: 10rpx 0;
					}

					.lit {
						font-size: 26rpx;
						width: 100%;
					}
				}
			}

			.nav_card:last-child {
				margin-right: 0;
			}
			.more{
				position: absolute;
				width: 40rpx;
				height: 92%;
				right: -36rpx;
				top: 0;
				display: flex;
				font-size: 26rpx;
				justify-content: center;
				box-sizing: border-box;
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.teacherbox{
			width: 652rpx;
			height: 332rpx;
			background-color: #fff;
			margin: 24rpx 32rpx 24rpx 32rpx;
			position: relative;
			border-radius: 24rpx;
			padding: 24rpx 20rpx 24rpx 208rpx;
			box-sizing: border-box;
			.teacherimg{
				position: absolute;
				top: 24rpx;
				left: -32rpx;
				width: 220rpx;
				height: 284rpx;
				border-radius: 16rpx;
			}
			.contbox{
				.title{
					font-size: 36rpx;
					color: #333333;
					font-weight: 600;
					margin-bottom: 10rpx;
				}
				.technicianName{
					color: #D4A553;
					font-size: 24rpx;
					margin-bottom: 38rpx;
				}
				.tetimebox{
					display: flex;
					align-items: center;
					.tetimeimg{
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
					.tetime{
						font-size: 22rpx;
						color: #999999;
					}	
				}
				.teaddrebox{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.teaddreimg{
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
					.teplace{
						width: 308rpx;
						white-space:nowrap;
						overflow:hidden;
						 text-overflow:ellipsis;
						font-size: 22rpx;
						color: #999999;
					}
					.tedis{
						font-size: 22rpx;
						color: #999999
					}
				}
				.poplebox{
					height: 60rpx;
					display: flex;
					border-radius: 29rpx;
					align-items: center;
					background: linear-gradient(90deg, #fff 0%, #F6F6F6 100%);
					position: relative;
					.polist{
						width: 108rpx;
						display: flex;
						margin-right: 5rpx;
						.poimg{
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
							margin-left: -14rpx;
						}
						.poimg:first-child{
							margin-left: 0;
						}
					}
					.memberbox{
						display: flex;
						.member{
							font-size: 22rpx;
							color: #D4A553;
						}
						.sum{
							font-size: 22rpx;
							color: #999999;
						}
					}
					.baom{
						margin-left: 8rpx;
						font-size: 22rpx;
						color: #D4A553;
					}
					.tiy{
						position: absolute;
						right: 0;
						width: 112rpx;
						height: 64rpx;
						background-color: #0D0D0D;
						font-size: 24rpx;
						text-align: center;
						line-height: 64rpx;
						color: #fff;
						border-radius: 31rpx;
					}
				}
			}
		}
		.card_item {	
			width: 652rpx;
			height: 332rpx;
			background-color: #fff;
			margin: 18rpx 41rpx;
			.conbox{
				width: 652rpx;
				height: 332rpx;
				position: relative;
				// border-radius: 24rpx;
				border-radius: 0 24rpx 24rpx 0 ;
				box-sizing: border-box;
				padding: 18rpx 0 ;
				.bannerimg{
					width: 222rpx;
					height: 284rpx;
					position: absolute;
					top: 24rpx;
					left: -38rpx;
					z-index: 1000;
					border-radius: 16rpx;
				}
				.textbox{
					width: 432rpx;
					margin: 0 203rpx;
					.destext{
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 50rpx;
						margin-right: 20rpx;
					}
					.destimebox{
						display: flex;
						margin-bottom: 10rpx;
						.destimeimg{
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
						.destetime{
							font-size: 22rpx;
							color: #999999;
						}
					}
					.desadderbox{
						display: flex;
						margin-bottom: 10rpx;
						.desaddimg{
							width: 18rpx;
							height: 22rpx;
							margin-right: 10rpx;
						}
						.desadd{
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
				.comimgbox{
					display: flex;
					align-items: center;
					width: 432rpx;
					margin: 0 205rpx;
					.communbox{
						display: flex;
						margin-right: 13rpx;
						.communbox .comimg:first-child{
								margin-left: 0;
						}
						.comimg{
							width: 36rpx;
							height: 36rpx;
							border-radius: 50%;
							margin-left: -12rpx;
						}
					}
						
				}
				.peplength{
					font-size: 22rpx;
					color: #D4A553;
				}
				.limit{
					font-size: 22rpx;
					color: #999999;
					margin-right: 10rpx;
				}
				.com{
					font-size: 22rpx;
					color: #D4A553;
				}
				.gotocom{
					width: 112rpx;
					height: 64rpx;
					border-radius: 31rpx;
					background-color: #0D0D0D;
					font-size: 24rpx;
					text-align: center;
					line-height: 64rpx;
					margin-left: 46rpx;
					color: #fff;
				}
			}

		}
	}

	.fix {
		position: relative;
		background-color: #fff;
		width: 750rpx;
		top: 0;
		left: 0;
		z-index: 999;
		.endimg{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			z-index: 1000;
			right: 150rpx;
			bottom: 28rpx;
		}
		.puadd{
			position: absolute;
			right: 32rpx;
			bottom: 24rpx;
			display: flex;
			align-items: center;
			z-index: 1000;
			.releaseimg{
				width: 32rpx;
				height: 32rpx;
			}
			.retext{
				font-size: 32rpx;
				color: #333333;
			}
		}
	}

	.tabs {
		box-sizing: border-box;
		z-index: 200;
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
		background: #fff;

		.city {
			height: 40rpx;
			width: 160rpx;
			margin-right: 6rpx;
			display: flex;

			.link-1 {
				max-width: 96rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				.linkcity{
					color: #333333;
				}
			}
		}

		.img2 {
			height: 36rpx;
			width: 36rpx;
			margin-right: 266rpx;
			.zuju{
				color: #333333;
				font-size: 36rpx;
			}
		}

		.tab1,
		.tab2 {
			font-size: 32rpx;
			margin-right: 52rpx;
			line-height: 44px;
			font-weight: 700;
			color: #999999;
		}

		.tab4 {
			color: #333333;
			position: relative;
		}
	}

	.ball-create-wrap {
		position: absolute;
		left: 0;
		bottom: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.ball-card-wrap {
		padding-bottom: 120rpx;

		view,
		text,
		.ball-time,
		.ball-address {
			color: white;
		}

		color: white;
		.ball-card {
			padding: 100rpx 60rpx 60rpx 60rpx;
			background-size: cover;
			background-repeat: no-repeat;
			position: relative;
			margin: 18rpx 0;

			.ball-type {
				font-size: 26rpx;
				color: #ffdf9f;
				border-radius: 4rpx;
				padding: 6rpx 15rpx;
				position: absolute;
				top: 50rpx;
				right: 0;

			}


			.ball-text {
				color: white;
			}

			.ball-desc {
				position: relative;

				>view {
					margin: 18rpx 0;
				}
			}



		}

		.ball-card:before {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.6);
		}







	}

	.home {
		.top {
			position: sticky;
			top: 0;
			z-index: 999;
			background: #1F1F1F;

			.nav {
				height: 44px;
				line-height: 44px;
			}
		}





		.list {
			.item {
				margin-top: 20rpx;
				background: #202020;
				border-radius: 16rpx;
				overflow: hidden;
				padding-bottom: 20rpx;

				.item_hd {
					background: #262626;
					padding-left: 20rpx;
					padding-right: 20rpx;
					display: flex;
					justify-content: space-between;
					height: 100rpx;
					align-items: center;

					.cover {
						height: 72rpx;
						width: 72rpx;
						border: 1px solid #7B7B7B;
						border-radius: 50%;
						overflow: hidden;

						image {
							height: 100%;
							width: 100%;
						}
					}


				}

				.item_bd {
					padding-left: 24rpx;
					padding-right: 24rpx;
					padding-top: 20rpx;
					padding-bottom: 20rpx;

					.lin {
						line-height: 50rpx;

					}

					.imgbox_sm {
						height: 40rpx;
						width: 40rpx;
						display: inline-block;
						vertical-align: middle;
						margin-right: 6rpx;
						font-size: 0;
						margin-left: 6rpx;

						image {
							height: 100%;
							width: 100%;
						}
					}
				}

				.item_ft {
					margin-left: 20rpx;
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius: 100rpx;
					background: #262626;

					.cover_group {
						display: flex;
					}

					.cover {
						margin-right: -15rpx;
						height: 48rpx;
						width: 48rpx;
						border-radius: 48rpx;
						border: 1px solid #7B7B7B;
						overflow: hidden;

						image {
							height: 100%;
							width: 100%;
						}

						&:last-child {
							margin-right: 0;
						}
					}

					.nums {
						line-height: 28 * 2rpx;
						margin-left: 16rpx;
					}

					.tip {
						margin-left: 16rpx;
					}

				}

				.left {
					display: flex;
					align-items: center;
				}


			}



		}
	}

.vipInfo{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		>image{
			width: 60rpx;
		}
	}
</style>